import React from 'react'
import { useState, useEffect } from 'react';

function MaxLenInput(props) {
    const { defaultValue="", maxLength } = props;
    const [curLen, setCurLen] = useState(0);
    const [value, setValue] = useState(defaultValue);

    useEffect(() => {
        setCurLen(value.length)
    }, [value])

    const inputChange = (event) => {
        let curValue = event.target.value;
        if (curValue.length > maxLength) {
            return;
        }
        setValue(curValue)
        // onChange(value, event);
    }
    
    return (
        <div className="wrapper">
            <input type="text" value={value} onChange={inputChange} />
            <div className="len_container">
                {curLen}/{maxLength}
            </div>
        </div>
    )
}

export default MaxLenInput